﻿    const ITEM_COLOR = {
    item1: "#FFB800",
    item2: "#1E9FFF",
    item3: "#FF5722",
    item4: "#5FB878",
    item5: "#393D49"
}

var test;

new Vue({
    el: '#app',
    watch: {
        StudentHeight(val) {
            if (val > 100) {
                this.StudentHeight = 100;
            }
            this.pieData[0].value = val;
            this.setOptions();
        },
        LeaderHeight(val) {
            if (val > 100) {
                this.LeaderHeight = 100;
            }
            this.pieData[1].value = val;
            this.setOptions();
        },
        TeacherHeight(val) {
            if (val > 100) {
                this.TeacherHeight = 100;
            }
            this.pieData[2].value = val;
            this.setOptions();
        },
        SelfHeight(val) {
            if (val > 100) {
                this.SelfHeight = 100;
            }
            this.pieData[3].value = val;
            this.setOptions();
        },
        DepartmentHeight(val) {
            if (val > 100) {
                this.DepartmentHeight = 100;
            }
            this.pieData[4].value = val;
            this.setOptions();
        },
        HaveStudent(val) {
            if (!val) {
                this.StudentHeight = null;
                this.pieData[0].value = val;
            }
            this.setOptions();
        },
        HaveLeader(val) {
            if (!val) {
                this.LeaderHeight = null;
                this.pieData[1].value = val;
            }
            this.setOptions();
        },
        HaveTeacher(val) {
            if (!val) {
                this.TeacherHeight = null;
                this.pieData[2].value = val;
            }
            this.setOptions();
        },
        HaveSelf(val) {
            if (!val) {
                this.SelfHeight = null;
                this.pieData[3].value = val;
            }
            this.setOptions();
        },
        HaveDepartment(val) {
            if (!val) {
                this.DepartmentHeight = null;
                this.pieData[4].value = val;
            }
            this.setOptions();
        }
    },
    data() {
        return {
            HaveStudent: false,
            HaveLeader: false,
            HaveTeacher: false,
            HaveSelf: false,
            HaveDepartment: false,
            StudentHeight: null,
            LeaderHeight: null,
            TeacherHeight: null,
            DepartmentHeight: null,
            SelfHeight: null,
            Time: null,
            pie: {},
            pieData: [
                {
                    name: '学生',
                    value: null
                }, {
                    name: '教研室领导',
                    value: null
                }, {
                    name: '教师',
                    value: null
                }, {
                    name: '自评',
                    value: null
                }, {
                    name: '系部',
                    value: null
                }
            ],
            option: {
                series: [
                    {
                        name: '比重设置',
                        type: 'pie',
                        radius: '55%',
                        data: []
                    }
                ]
            }
        }
    },
    created() {
        this.option.series[0].data = this.pieData;
        
    },
    mounted() {
        this.pie = echarts.init(document.getElementById('pie'));

        layui.use(['jquery', 'form', 'laydate', 'layer'],
            function () {
                var $ = layui.jquery;
                var form = layui.form;
                var laydate = layui.laydate;
                var layer = layui.layer;

                function SessionStorageHaveInfo(infoType) {
                    if (sessionStorage.getItem(infoType) != null) return sessionStorage.getItem(infoType);
                    else return false;
                }

                function studyYearRender(data) {
                    // 页面渲染
                    data.forEach(r => {
                        $('[name="studyYear"]').append(`<option value="${r.ID}">${r.Name}</option>`);
                    });
                    // 重新渲染表单
                    form.render();
                }

                if (SessionStorageHaveInfo("studyYear")) {
                    studyYearRender(JSON.parse(SessionStorageHaveInfo("studyYear")));
                } else {
                    //请求学年数据
                    $.get('/api/getstudyyaarsinfo',
                        function(res) {
                            //放入sessionstorage
                            sessionStorage.setItem("studyYear", JSON.stringify(res));
                            //渲染
                            studyYearRender(res);

                        });
                }


                // 监听Form提交 最后都会false 目的是验证必要字段
                form.on('submit(myForm)', function () {
                    var data = form.val("myForm");
                    // 弹窗确认
                    layer.open({
                        btn: ['发布', '取消'],
                        title: '确认信息',
                        content: `<p>标题:${data.Title}</p>
                                <p>起止时间:${data.Time}</p>
                                <p>学年:${data.studyYear}</p>
                                <p>学生比重:${data.StudentHeight == '' ? '未参与' : data.StudentHeight}</p>
                                <p>教研室比重:${data.LeaderHeight == '' ? '未参与' : data.LeaderHeight}</p>
                                <p>教师互评比重:${data.TeacherHeight == '' ? '未参与' : data.TeacherHeight}</p>
                                <p>自评比重:${data.SelfHeight == '' ? '未参与' : data.SelfHeight}</p>
                                <p>院系比重:${data.DepartmentHeight == '' ? '未参与' : data.DepartmentHeight}</p>`,
                        yes: function (index) {
                            let reg = /\d{4}-\d{2}-\d{2}/g;
                            // 准备参数
                            let parms = {
                                Title: data.Title,
                                // exec特性 需要继续匹配 类似游标
                                StartTime: reg.exec(data.Time)[0],
                                EndTime: reg.exec(data.Time)[0],
                                StudyYear: data.studyYear,
                                StudentHeight: data.StudentHeight == '' ? 0 : data.StudentHeight,
                                LeaderHeight: data.LeaderHeight == '' ? 0 : data.LeaderHeight,
                                TeacherHeight: data.TeacherHeight == '' ? 0 : data.TeacherHeight,
                                SelfHeight: data.SelfHeight == '' ? 0 : data.SelfHeight,
                                DepartmentHeight: data.DepartmentHeight == '' ? 0 : data.DepartmentHeight
                            };
                            let total = Number(parms.StudentHeight) +
                                Number(parms.LeaderHeight) +
                                Number(parms.TeacherHeight) +
                                Number(parms.SelfHeight) +
                                Number(parms.DepartmentHeight);
                            console.log(total);
                            if (!total) {
                                layer.msg('无参与者!', { icon: 2 });
                            }
                            // 发送ajax请求 创建
                            $.post('/api/saveevaluate',
                                parms,
                                function (res) {
                                    if (res) {
                                        layer.msg('发布成功', { icon: 1 });
                                    } else {
                                        layer.msg('发布好像出了点问题', { icon: 2 });
                                    }
                                });
                            layer.close(index);
                        },
                        btn2: function (index) {
                            layer.close(index);
                        }
                    });
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });


                $('.item').click(function () {
                    // 样式处理
                    //点击元素
                    let temp = /item-[0-9]{1}/.exec(this.className);
                    let index = /\d{1}/.exec(this.className);
                    if (/item-[0-9]{1}active/.test(this.className)) {
                        // 已经是激活状态
                        $(this).removeClass(`${temp}active`);
                        $(this).children().css('color', ITEM_COLOR[`item${index}`]);
                    } else {
                        $(this).addClass(`${temp}active`);
                        $(this).children().css('color', "#fafafa");
                    }

                });
                laydate.render({
                    elem: '#start', //指定元素
                    range: '~',
                    trigger: 'click',
                    theme: 'molv'
                });

            });
    },
    methods: {
        setOptions() {
            this.pie.setOption(this.option);
        },
        test() {
            console.log($('#start').val());
        }
    }
});





